<template>
<!--    人脸检测失败页面-->
     <div class="defeated">
         <div class="defeated_white">
             <div class="defeated_img">
                 <p class="result-box-pic-icon"></p>
                 <p class="result-box-pic-icon"></p>
                 <p class="result-box-pic-icon"></p>
                 <p class="result-box-pic-icon"></p>
                 <img src="//aip.bdstatic.com/faceliveness/dist/1523595724898/images/pic_default.png"/>
             </div>
            <p class="defeated_span">
               <span style="font-size: 0.4rem"> 活体检测<span style="color: red">失败</span></span><br>
                <span style="font-size: 0.2rem;color: #999">没有识别到人脸</span>
            </p>
        
             <div class="defeated_result">
                 <p>检测分号值:0</p>
                 <p>应读数字:0</p>
                 <p>检测数字:0</p>
             </div>
     </div>
     <div class="defeated_button">
         <van-button type="info" @click.stop="complete">完成</van-button>
         <van-button plain type="info"  @click="again" >重拍</van-button>
     </div>
        </div>


</template>

<script>
    export default {
        name: "defeated",
        data(){
            return{

            }
        },
        methods:{
            again(){
              this.$emit("again")
            },
            complete(){
                this.$emit("complete")
            }
        }
    }
</script>

<style lang="scss" scoped >
    .defeated{
        height: 84%;
        background: #f0f2f5;
    }
    .defeated_button{
        margin: 15% auto;
        width: 90%;
        display: flex;
        justify-content: space-between;
        .van-button--normal{
            padding: 0.06rem 1.2rem;
            .van-button__text{
                font-size: 0.35rem;
            }
        }
    }
    .defeated_white{
        .defeated_result{
            margin: 9% auto;
            width: 4rem;
            p{
                margin-top: 0.2rem;
                font-size: 0.3rem;
                color: #999;
            }
        }
        .defeated_span{
            text-align: center;
            margin-top: 0.7rem;
        }
        height: 8rem;
        background: #fff !important;
        width: 90%;
        margin: 0 auto;
        padding-top: 0.7rem;
        position: relative;
      top: 0.4rem;
        .defeated_img{
            position: relative;
            width: 3.7rem;
            height:3.7rem;
            margin: 0 auto;
            img{
                width: 2.5rem;
                height: 2.5rem;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -1.25rem;
                margin-top: -1.25rem;
            }
            :nth-child(1){
                left: 0;
                top: 0;
                background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/icon_left_top.png) 0 0 no-repeat;
                -moz-background-size: 50% 50%;
                background-size: 50% 50%;
            }
            :nth-child(2){
                right: 0;
                top: 0;
                background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/icon_right_top.png) 0.2rem 0 no-repeat;
                -moz-background-size: 50% 50%;
                background-size: 50% 50%;
            }
            :nth-child(3){
                left: 0;
                bottom: -0.17rem;
                background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/icon_left_bottom.png) 0 0.165rem no-repeat;
                -moz-background-size: 50% 50%;
                background-size: 50% 50%
            }
            :nth-child(4){
                right: -0.17rem;
                bottom: -0.17rem;
                background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/icon_right_bottom.png) 0.165rem 0.165rem no-repeat;
                -moz-background-size: 50% 50%;
                background-size: 50% 50%;
            }
        }
    }

       .result-box-pic-icon {
           position: absolute;
           width: 0.4rem;
           height: 0.4rem}

</style>